import { Component,ViewChild,ElementRef } from '@angular/core';
import { NavController, NavParams, LoadingController, Loading, ModalController, AlertController} from 'ionic-angular';
import { DataService } from '../../services/data';
import { Storage } from '@ionic/storage';
import Avatars from '@dicebear/avatars';
import SpriteCollection from '@dicebear/avatars-identicon-sprites';
import {DomSanitizer} from '@angular/platform-browser'
import ECharts from 'echarts';

/*
  Generated class for the My page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-statistics',
  templateUrl: 'statistics.html',
  providers: [DataService]
})
export class StatisticsPage {

  @ViewChild('chart') chart: ElementRef;
  @ViewChild('chart2') chart2: ElementRef;

  public statistics:any = {

  }

  public avatars = new Avatars(SpriteCollection)

  constructor(public navCtrl: NavController, private sanitizer: DomSanitizer, public modalCtrl: ModalController, public navParams: NavParams, public dataService: DataService, public storage: Storage, public loadingCtrl: LoadingController, public alertCtrl: AlertController) {
   
  }

  ionViewDidLoad() {
    let loader = this.loadingCtrl.create({
      content: "Loading...",
    });
    loader.present()
    this.statistics = this.dataService.getGameStatistic(this.navParams.get('id')).subscribe( (data) => {
      this.statistics = data;
      this.initChart();
      loader.dismiss()
    })
  }

  initChart() {
    let element = this.chart.nativeElement;
    let myChart = ECharts.init(element);
    myChart.setOption({
      title: {
          // text: '多雷达图'
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          x: 'right',
          data:['综合']
      },
      radar: [
          {
              indicator: [
                  {text: '将领', max: this.statistics.people_count_total},
                  {text: '城池', max: this.statistics.city_count_total},
                  {text: '兵力', max: this.statistics.arms_count_total},
                  {text: '粮食', max: this.statistics.food_count_total},
                  {text: '金钱', max: this.statistics.money_count_total}
              ],
              // center: ['25%','40%'],
              radius: 90
          },
          
      ],
      series: [
          {
              type: 'radar',
               tooltip: {
                  trigger: 'item'
              },
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data: [
                  {
                      value: [
                        this.statistics.people_count,
                        this.statistics.city_count,
                        this.statistics.arms_count,
                        this.statistics.food_count,
                        this.statistics.money_count,
                      ],
                      name: '详细数据'
                  }
              ]
          },
          
      ]
    });

    let element2 = this.chart2.nativeElement;
    // element.style.width = (document.body.clientWidth - 16) + 'px';//设置容器宽度
    let myChart2 = ECharts.init(element2);
    myChart2.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data:['农业','商业', '人口']
        },
        series: [
            {
                name:'发展',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value: this.statistics.farming_count, name:'农业'},
                    {value: this.statistics.commerce_count, name:'商业'},
                    {value: this.statistics.population_count, name:'人口'},
                ]
            }
        ]
    });
  }
}